<script setup>
    import { computed, ref } from 'vue'
    // 计划列表
    const planList = ref([
    { id: 12, name: '跑步', done: false },
    { id: 76, name: '看书', done: false },
    { id: 31, name: '撸码', done: false },
    { id: 49, name: '追剧', done: false }
    ])
    const onToggle = () => {
        planList.value.forEach((item) => {
            item.done = true
        })
    }
    const isAll = computed({
        get() {
            return planList.value.every((item) => item.done)
        },
        set(val) {
            planList.value.forEach((item) => {
                item.done = val;
            })
        }
    })
</script>
<template>
    <p>
        <span>
            <input type="checkbox" id="all" v-model="isAll"/>
            <label for="all">全选</label>
        </span>
        <button @click="onToggle">反选</button>
    </p>
    <ul>
        <li v-for="(item) in planList" :key="item.id">
            <input type="checkbox" v-model="item.done"/>
            <span :class="{computed: item.done}">{{ item.name }}</span>
        </li>
    </ul>
</template>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
} 
div {
    width: 400px;
    margin: 100px auto;
    padding: 15px;
    font-size: 18px;
    background-color: plum;
    p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        button {
            padding: 3px 6px;
        }
    }
}

ul {
    list-style: none;
    li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        border-top: 1px solid #ccc;
        span.completed {
            color: #ddd;
            text-decoration: line-through;
        }
    }
}

input {
    margin-right: 8px;
}
</style>